<script setup lang="ts">
import { ref } from 'vue'
import { LengthInput, SpeedInput, PromoteInput } from '@/widgets'

const length = ref(100)
const disabled = ref<boolean>(false)
const spd = ref(100)

const lst: string[] = []
for (let i = 0; i < 100; i++) {
  lst.push('ABC#' + i)
}

const promoteInputValue = ref('abc')

function promote(s: string): string[] {
  let s1 = s?.trim()
  if (!s1 || s1.length === 0) {
    return lst.slice(0, 10)
  }
  s1 = s1.toLowerCase()
  const ret = []
  for (const e of lst) {
    if (e.toLowerCase().indexOf(s1) >= 0) {
      ret.push(e)
      if (ret.length >= 10) {
        break
      }
    }
  }
  return ret
}
</script>
<template>
  <div class="input-example pane-block">
    <div class="row">
      <label class="checkbox">
        <input type="checkbox" v-model="disabled" />
        Disabled
      </label>
    </div>
    <div class="row">
      <div class="col-3em txt-box">长度</div>
      <LengthInput
        class="col-12em"
        style="margin-right: 2em"
        v-model="length"
        :disabled="disabled"
        :min="30"
        :max="110"
      />
      <div class="txt-box">{{ length }}</div>
    </div>
    <div class="row">
      <div class="col-3em txt-box">速度</div>
      <SpeedInput
        class="col-12em"
        style="margin-right: 2em"
        v-model="spd"
        :disabled="disabled"
        :min="30"
        :max="110"
      />
      <div class="txt-box">{{ spd }}</div>
    </div>
    <div class="row">
      <div class="col-3em txt-box">提示</div>
      <PromoteInput
        class="col-12em"
        style="margin-right: 2em"
        v-model="promoteInputValue"
        :promote="promote"
        :placeholder="'精确匹配'"
      />
    </div>
    <div class="row">
      <div class="txt-box">{{ promoteInputValue }}</div>
    </div>
  </div>
</template>
<style lang="scss">
.input-example {
  width: 25em;
  height: 30em;
}
</style>
